<!DOCTYPE html>
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="utf-8">
		<!--自动刷新，1s=1-->
		<!--<META http-equiv="Refresh" content="3">-->
		<!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
		<meta http-equiv="X-UA-Compatible" cotent="IE=edge,chrome=1" />
		<!--禁止缓存-测试时用-->
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<!--禁止缓存-测试时用-->
		<!--禁止禁止识别电话号码和邮件-->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!--禁止禁止识别电话号码和邮件-->
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<meta name="x5-orientation" content="portrait" />
		<meta name="x5-fullscreen" content="true" />
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="screen-orientation" content="portrait">
		<meta name="full-screen" content="yes">
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>水球进度条-多个</title>
		<style type="text/css">
			* {
				box-sizing: border-box;
			}
			html, body {
				height: 100%;
			}
			body {
				background-color: #1a1a1a;
				font-family: sans-serif;
				font-size: 15px;
				color: #ccc;
			}
			input[type="text"] {
				background-color: transparent;
				margin-top: 30px;
				border: 0;
				border-bottom: solid 1px #8080ff;
				text-align: center;
				font-size: 20px;
				color: #518bf0;
				text-shadow: 0 0 3px #518bf0;
				width: 45px;
				display: inline-block;
			}
			input:focus {
				outline: 0;
				border-bottom: dashed 1px #ff8080;
			}
			input::-moz-selection {
				color: #1a1a1a;
				background-color: #c6e4ee;
			}
			input::selection {
				color: #1a1a1a;
				background-color: #c6e4ee;
			}
			::-webkit-input-placeholder {
				color: #7aa6f3;
				text-shadow: 0 0 3px #7aa6f3;
			}
			:-moz-placeholder {
				color: #7aa6f3;
				text-shadow: 0 0 3px #7aa6f3;
			}
			::-moz-placeholder {
				color: #7aa6f3;
				text-shadow: 0 0 3px #7aa6f3;
			}
			:-ms-input-placeholder {
				color: #7aa6f3;
				text-shadow: 0 0 3px #7aa6f3;
			}
			.wrapper {
				display: -webkit-box;
				display: -webkit-flex;
				display: -ms-flexbox;
				display: box;
				display: flex;
				-webkit-box-align: center;
				-o-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-o-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-orient: vertical;
				-o-box-orient: vertical;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction:row;
				height: 100%;
			}
			.qiu {
				margin:30px;
			}
			.qiu .progress, .red .progress, .orange .progress {
				position: relative;
				border-radius: 50%;
			}
			.qiu .progress, .red .progress, .orange .progress {
				/*240时无间距*/
				width: 250px;
				height: 250px;
			}
			.qiu .progress {
				/*外边框*/
				border: 5px solid #53fc53;
			}
			.qiu .progress {
				box-shadow: 0 0 20px #029502;
			}
			.qiu .progress, .red .progress, .orange .progress {
				-webkit-transition: all 1s ease;
				transition: all 1s ease;
			}
			.qiu .progress .inner, .red .progress .inner, .orange .progress .inner {
				position: absolute;
				overflow: hidden;
				z-index: 2;
				border-radius: 50%;
			}
			.qiu .progress .inner, .red .progress .inner, .orange .progress .inner {
				width: 240px;
				height: 240px;
			}
			.qiu .progress .inner, .red .progress .inner, .orange .progress .inner {
				/*inner这里跟外边框的间距*/
				border: 5px solid #1a1a1a;
			}
			.qiu .progress .inner, .red .progress .inner, .orange .progress .inner {
				-webkit-transition: all 1s ease;
				transition: all 1s ease;
			}
			.qiu .progress .inner .water, .red .progress .inner .water, .orange .progress .inner .water {
				position: absolute;
				z-index: 1;
				width: 200%;
				height: 200%;
				left: -50%;
				border-radius: 40%;
				-webkit-animation-iteration-count: infinite;
				animation-iteration-count: infinite;
				-webkit-animation-timing-function: linear;
				animation-timing-function: linear;
				-webkit-animation-name: spin;
				animation-name: spin;
			}
			.qiu .progress .inner .water2, .red .progress .inner .water2, .orange .progress .inner .water2 {
				-webkit-animation-iteration-count: infinite;
				animation-iteration-count: infinite;
				-webkit-animation-timing-function: linear;
				animation-timing-function: ease-in;
				-webkit-animation-name: spin;
				animation-name: spin;
				opacity: 0.7;
			}
			.qiu .progress .inner .water3, .red .progress .inner .water3, .orange .progress .inner .water3 {
				-webkit-animation-iteration-count: infinite;
				animation-iteration-count: infinite;
				-webkit-animation-timing-function: linear;
				animation-timing-function: ease-out;
				-webkit-animation-name: spin;
				animation-name: spin;
				opacity: 0.4;
			}
			.qiu .progress .inner .water {
				top: 100%;
			}
			.qiu .progress .inner .water {
				background: rgba(83, 252, 83, 0.5);
			}
			.qiu .progress .inner .water, .red .progress .inner .water, .orange .progress .inner .water {
				-webkit-transition: all 1s ease;
				transition: all 1s ease;
			}
			.qiu .progress .inner .water, .red .progress .inner .water, .orange .progress .inner .water {
				-webkit-animation-duration: 10s;
				animation-duration: 10s;
			}
			.qiu .progress .inner .water {
				box-shadow: 0 0 20px #03bc03;
			}
			.qiu .progress .inner .glare, .red .progress .inner .glare, .orange .progress .inner .glare {
				position: absolute;
				top: -120%;
				left: -120%;
				z-index: 5;
				width: 200%;
				height: 200%;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				border-radius: 50%;
			}
			.qiu .progress .inner .glare, .red .progress .inner .glare, .orange .progress .inner .glare {
				background-color: rgba(255, 255, 255, 0.15);
			}
			.qiu .progress .inner .glare, .red .progress .inner .glare, .orange .progress .inner .glare {
				-webkit-transition: all 1s ease;
				transition: all 1s ease;
			}
			.qiu .progress .inner .percent, .red .progress .inner .percent, .orange .progress .inner .percent {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-weight: bold;
				text-align: center;
			}
			.qiu .progress .inner .percent, .red .progress .inner .percent, .orange .progress .inner .percent {
				line-height: 240px;
				font-size: 92.3076923076923px;
			}
			.qiu .progress .inner .percent {
				color: #03c603;
			}
			.qiu .progress .inner .percent {
				text-shadow: 0 0 10px #029502;
			}
			.qiu .progress .inner .percent, .red .progress .inner .percent, .orange .progress .inner .percent {
				-webkit-transition: all 1s ease;
				transition: all 1s ease;
			}
			.red {
				margin-top: 15px;
			}
			.red .progress {
				border: 5px solid #ed3b3b;
			}
			.red .progress {
				box-shadow: 0 0 20px #7a0b0b;
			}
			.red .progress .inner .water {
				top: 75%;
			}
			.red .progress .inner .water {
				background: rgba(237, 59, 59, 0.5);
			}
			.red .progress .inner .water {
				box-shadow: 0 0 20px #9b0e0e;
			}
			.red .progress .inner .percent {
				color: #a30f0f;
			}
			.red .progress .inner .percent {
				text-shadow: 0 0 10px #7a0b0b;
			}
			.orange {
				margin-top: 15px;
			}
			.orange .progress {
				border: 5px solid #f07c3e;
			}
			.orange .progress {
				box-shadow: 0 0 20px #7e320a;
			}
			.orange .progress .inner .water {
				top: 50%;
			}
			.orange .progress .inner .water {
				background: rgba(240, 124, 62, 0.5);
			}
			.orange .progress .inner .water {
				box-shadow: 0 0 20px #a0400c;
			}
			.orange .progress .inner .percent {
				color: #a8430d;
			}
			.orange .progress .inner .percent {
				text-shadow: 0 0 10px #7e320a;
			}
			#copyright {
				margin-top: 25px;
				background-color: transparent;
				font-size: 14px;
				color: #b3b3b3;
				text-align: center;
			}
			#copyright div {
				margin-bottom: 10px;
			}
			#copyright a, #copyright a:link {
				color: #808080;
				text-decoration: none;
				border-bottom: 1px solid #808080;
				padding-bottom: 2px;
			}
			#copyright a:active {
				color: #b3b3b3;
			}
			#copyright a:hover {
				color: #b3b3b3;
				border-bottom: 1px solid #b3b3b3;
				padding-bottom: 4px;
			}
			.instructions {
				display: inline-block;
				margin: 5px 0;
				font-size: 16px;
			}
			@-webkit-keyframes spin {
				from {
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
				}
				to {
					-webkit-transform: rotate(360deg);
					transform: rotate(360deg);
				}
			}
			@keyframes spin {
				from {
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
				}
				to {
					-webkit-transform: rotate(360deg);
					transform: rotate(360deg);
				}
			}
		</style>
	</head>

	<body>
		<div class="wrapper">

			<div class="qiu">
				<div class="progress">
					<div class="inner">
						<div class="percent" data-percent="40"></div>
						<div class="water"></div>
						<div class="water water2"></div>
						<div class="water water3"></div>
						<!--斜纹-->
						<div class="glare"></div>
					</div>
				</div>
			</div>
			<div class="qiu">
				<div class="progress">
					<div class="inner">
						<div class="percent" data-percent="70"></div>
						<div class="water"></div>
						<div class="water water2"></div>
						<div class="water water3"></div>
						<!--斜纹-->
						<div class="glare"></div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$('.qiu').each(function() {
					var num =$(this).find(".percent").attr('data-percent');
					if(num < 33){
							$(this).addClass("red");
					}else if((num >= 33) && (num < 66)){
							$(this).addClass("orange");
					}else{
							$(this).addClass("green");
					}
					$(this).find(".percent").text(num + "%");
					$(this).find(".progress .water").css("top", 100 - num + "%");

				});
			});
		</script>
	</body>

</html>